let dailyArr = [
    { id: 1, time: '2020-08-25 14:54', item: '考试提醒', figuer: '张莉', ip: '220.231.210.22', test: '新增试题' },
    { id: 2, time: '2020-08-25 14:54', item: '题库管理', figuer: '辽霖', ip: '220.231.210.22', test: '新增试题' },
    { id: 3, time: '2020-08-25 14:54', item: '开始考试', figuer: '谈越', ip: '220.231.210.22', test: '新增试题' },
    { id: 4, time: '2020-08-25 14:54', item: '题库管理', figuer: 'admin', ip: '220.231.210.22', test: '新增试题' },
    { id: 5, time: '2020-08-25 14:54', item: '考试检测', figuer: '侯靖临', ip: '220.231.210.22', test: '新增试题' },
    { id: 6, time: '2020-08-25 14:54', item: '题库管理', figuer: 'admin', ip: '220.231.210.22', test: '新增试题' },
    { id: 7, time: '2020-08-25 14:54', item: '考试监控', figuer: '洛安', ip: '220.231.210.22', test: '新增试题' },
    { id: 8, time: '2020-08-25 14:54', item: '题库系统', figuer: '李小明', ip: '220.231.210.22', test: '新增试题' },
    { id: 9, time: '2020-08-25 14:54', item: '考试检测', figuer: '侯靖临', ip: '220.231.210.22', test: '新增试题' }
]

let zTbody = document.querySelector('tbody');
let zPagination = document.querySelector('.pagination');
//查询事件
let zSearch = document.querySelector('.zz-search');//查询按钮
let zSearchcon = document.querySelector('.zz-searchcon')//查询的内容
let zOpt = document.querySelector('.zz-opt');
//重置
let zBut1 = document.querySelector('.zz-rod');
let id = 10;
let n = 0;
let count = 4;//每页的个数
let iNow = 1;//当前页

//页面加载渲染数据
//页码和内容
function render(arr) {
    let str = '';
    let renderDate = arr.slice((iNow - 1) * count, iNow * count);
    for (let i = 0; i < renderDate.length; i++) {
        str += `<tr class="zz-tr">
        <td id="td1">${i + 1}</td>
      <td id="td1">${renderDate[i].time}</td>
      <td id="td1">${renderDate[i].item}</td>
      <td id="td1">${renderDate[i].figuer}</td>
      <td id="td1">${renderDate[i].ip}</td>
      <td id="td1">${renderDate[i].test}</td>
  </tr>`
    }
    zTbody.innerHTML = str;

    //创建页码
    let zPageleft = `<li class="left">
<a class="left" href="#" aria-label="Previous">
  <span class="left" style="width:0px;height:0px;display:inline-block" aria-hidden="true">&laquo;</span>
</a>
</li>`;
    let zPageright = `<li class="right" >
<a class="right" href="#" aria-label="Next">
  <span  class="right" style="width:0px;height:0px;display:inline-block" aria-hidden="true">&raquo;</span>
</a>
</li>`;
    let zPagestr = '';
    for (let i = 1; i <= Math.ceil(arr.length / count); i++) {
        if (iNow == i) {
            zPagestr += `<li class="active"><a href="#">${i}</a></li>`
        } else {
            zPagestr += `<li><a href="#">${i}</a></li>`

        }
    }
    zPagination.innerHTML = zPageleft + zPagestr + zPageright;
}
render(dailyArr);

//分页的功能，页码的点击
zPagination.addEventListener('click', function (e) {
    if (e.target.className == 'left') {
        if (iNow > 1) {
            iNow--;
        }
    } else if (e.target.className == 'right') {
        if (iNow < Math.ceil(dailyArr.length / 4)) {
            iNow++;
            console.log(iNow);
        }
    } else {
        iNow = e.target.innerText.trim();
    }
    render(dailyArr);
})
//重置
zBut1.addEventListener('click', function () {
    location.reload();
})
//查询事件
//点击查询事件，获取输入框的值和下拉框的值，输入并满足条件的时候，显示查询结果
zSearch.addEventListener('click', function () {
    let str = zOpt.value;
    let num1Arr = [];
    let listArr = [];

    if (str.trim() != '') {    //第一个输入框的值不为空的时候，在原始数据中进行筛选满足第一个输入框的值的条件，并添加到num1Arr的空数组里面，当为空的时候，num1Arr为原始数据
        for (let i = 0; i < dailyArr.length; i++) {
            if (dailyArr[i].item.includes(str)) {
                num1Arr.push(dailyArr[i]);
            }
        }
    }else{
        num1Arr=dailyArr;
    }

    let str1 = zSearchcon.value;

    if(str1!=''){  //完成这个查询需要满足两个条件，在第一个条件的基础上，在筛选满足第二个条件放在新数组里，再进行渲染；把第二个数组里的数据再进行渲染；
        for (let i = 0; i < num1Arr.length; i++) {
        
            if (num1Arr[i].figuer.includes(str1)) {
                listArr.push(num1Arr[i]);
            }
        }
    }else{
        listArr=num1Arr
    }
    render(listArr)
})
